<!--
 * @Author: vlesil 11236032+vlesil@user.noreply.gitee.com
 * @Date: 2022-10-12 10:58:23
 * @LastEditors: vlesil 11236032+vlesil@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 15:18:50
 * @FilePath: \practise\team-cooperation-project\src\pages\admin\account\Custome.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 顾客账户管理 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <!-- 查询 -->
      <div class="left">
        <el-form ref="accountForm" :inline="true" :model="params" class="demo-form-inline">
          <el-form-item>
            <el-date-picker
              v-model="Time"
              type="datetimerange"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right"
            />
          </el-form-item>
          <el-form-item>
            <el-select v-model="params.type" clearable placeholder="请选择类型">
              <el-option label="充值" value="充值" />
              <el-option label="消费" value="消费" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="params.status" clearable placeholder="请选择状态">
              <el-option label="正常" value="正常" />
              <el-option label="未审核" value="未审核" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="params.userId" clearable placeholder="顾客编号">
              <el-option v-for="item in findUserData" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 充值 -->
      <div class="right">
        <el-form ref="rechargeableForm" :rules="rules" :inline="true" :model="rechargeable" class="demo-form-inline">
          <el-form-item label="充值金额" prop="money">
            <el-input v-model.number="rechargeable.money" clearable autocomplete="off" />
          </el-form-item>
          <el-form-item prop="customerId">
            <el-select v-model="rechargeable.customerId" clearable placeholder="顾客编号">
              <el-option v-for="item in findUserData" :key="item.id" :label="item.username" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="toRechargeable">充值</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="center">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="id" label="编号" width="180" />
        <el-table-column prop="transferMoney" label="交易金额" width="180" />
        <el-table-column prop="transferTime" label="交易时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.transferTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="type" label="交易类型" width="180" />
        <el-table-column prop="status" label="状态" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '正常'" type="success" effect="dark">
              正常
            </el-tag>
            <el-tag v-else type="danger" effect="dark">
              未审核
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="description" label="描述" />
      </el-table>
    </div>
    <!-- /体部 -->

    <!-- 底部 -->
    <div class="footer">
      <el-pagination
        background
        :current-page="params.page"
        :page-sizes="[2, 10, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- /底部 -->
  </div>
</template>

<script>
import { findUser, customerAccount, customerRechargeable } from '@/api/account'
export default {
  data() {
    return {
      // 搜索信息
      params: {
        page: 1,
        pageSize: 10
      },
      // 时间信息
      Time: [],
      // 顾客信息
      findUserData: [],
      // 充值信息
      rechargeable: {},
      // 分页查询信息
      tableData: [],
      // 总条数
      total: 0,
      rules: {
        money: [
          { required: true, message: '请输入金额', trigger: 'blur' },
          { type: 'number', message: '金额必须为数字' }
        ],
        customerId: [
          { required: true, message: '请选择顾客编号', trigger: 'change' }
        ]
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  computed: {},
  created() {
    this.getCustomerAccount()
    this.findUsers()
  },
  mounted() { },
  methods: {
    // 查询顾客名单
    async findUsers() {
      const res = await findUser()
      for (const i in res.data) {
        if (res.data[i].roles[0].id === 6) {
          this.findUserData.push(res.data[i])
        }
      }
    },
    // 查询顾客账单
    async getCustomerAccount() {
      // 开启加载动画
      this.loading = true
      // 如果被清空，就移除属性
      if (!(this.Time)) {
        this.params.beginTime = ''
        this.params.endTime = ''
      }
      for (const key in this.params) {
        // key--属性名
        // this.params[key] ---属性值
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      const res = await customerAccount(this.params)
      this.tableData = res.data.list
      this.total = res.data.total
      // 关闭加载动画
      this.loading = false
    },
    // 搜索按钮
    toSearch() {
      this.params.page = 1
      if (this.Time != null) {
        const beginTime = Date.parse(this.Time[0])
        const endTime = Date.parse(this.Time[1])
        this.params = { ...this.params, beginTime, endTime }
        this.getCustomerAccount()
      } else {
        this.getCustomerAccount()
      }
    },
    // 顾客充值
    async toRechargeable() {
      this.$refs.rechargeableForm.validate(async(valid) => {
        if (valid) {
          const res = await customerRechargeable(this.rechargeable)
          this.$notify({
            type: 'success',
            message: res.message
          })
          this.getCustomerAccount()
          this.$refs.rechargeableForm.resetFields()
        } else {
          return false
        }
      })
      // let res = await customerRechargeable(this.rechargeable);
      // this.getCustomerAccount();
    },
    // 页码条数发生改变的方法
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getCustomerAccount()
    },
    // 当前页码发生改变出发的方法
    handleCurrentChange(page) {
      this.params.page = page
      this.getCustomerAccount()
    }
  }
}
</script>
<style scoped>
.footer {
  margin-top: 15px;
  text-align: right;
}
</style>
